<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>fetch核心语法</title>
</head>

<body>
  <h2>fetch核心语法</h2>
  <button class="btn">测试</button>
  <script>
    /**
     * fetch核心语法
     *  1.如何发请求?
     *  2.如何处理响应(JSON)?
     *  3.如何处理异常?
     * */
    document.querySelector('.btn').addEventListener('click', async () => {


      const p = new URLSearchParams({ pname: '广东省', cname: '深圳市' })
      // 1.如何发请求? 默认是get方法,参数1 url地址,返回的Promise
      const res = await fetch('http://hmajax.itheima.net/api/area?' + p.toString())
      // const res = await fetch('http://hmajax.itheima.net/api/area1234')
      // console.log(res)

      if (res.status >= 200 && res.status < 300) {
        // 2.如何处理响应(JSON)? .json方法解析json.返回Promise
        const data = await res.json()
        console.log(data)
      } else {
        // 3.如何处理异常?
        console.log('请求异常', res.status)
      }
    })    
  </script>
</body>

</html>